<template>
  <master title="学生管理">
    <div class="searchForm">
      <div class="searchFormInputs">
        <el-input class="searchFormInput" v-model="params.name" placeholder="按姓名查找"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
      <div class="searchFormBtn">
        <el-button type="danger" icon="el-icon-plus" @click="edit()">增加</el-button>
      </div>
    </div>
    <div class="el-table">
      <el-table :data="rows" stripe style="width: 90%">
        <!-- <el-table-column prop="image" label="照片">
          <template slot-scope="scope">
            <img v-if="scope.row.img" class="photo" :src="APIURL + scope.row.img" />
            <img v-else class="photo" src="@/assets/photo.png" />
          </template>
        </el-table-column> -->
        <el-table-column prop="studentId" label="学号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="college" label="学院">
        </el-table-column>
        <el-table-column prop="grade" label="年级">
        </el-table-column>
        <el-table-column prop="major" label="专业">
        </el-table-column>
        <el-table-column prop="className" label="班级">
        </el-table-column>
        <el-table-column prop="studentStatus" label="学生状态">
          <template slot-scope="scope">
            <!-- 使用 formatter 将 type 转换为对应的文字 -->
            {{ getStudentType(scope.row.studentStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="el-pagination">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
        :page-sizes="[5, 10, 15, 20, 25]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="editForm.id ? '编辑学生信息' : '新增学生信息'" :visible.sync="visible">
      <el-form ref="editForm" :model="editForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="学号">
              <el-input v-model="editForm.studentId" placeholder="学号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="editForm.name" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属学院">
              <el-input v-model="editForm.college" placeholder="所属学院"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级">
              <el-input v-model="editForm.grade" placeholder="年级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="专业">
              <el-input v-model="editForm.major" placeholder="专业"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <el-input v-model="editForm.className" placeholder="班级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学生状态">
              <el-select v-model="editForm.studentStatus" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="visible = false">取消</el-button>
          <el-button type="danger" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        loading: false,
        params: {
          pageSize: 5,
          pageNum: 1,
          name: ''
        },
        total: 0,
        rows: [],
        visible: false,
        editForm: {
          id: '',
          studentId: '',
          name: '',
          college: '',
          grade: '',
          major: '',
          className: '',
          studentStatus: 1
        },
        enterprise: [],
        options: [
          { label: '在校', value: 1 },
          { label: '毕业', value: 2 },
          { label: '休学', value: 3 },
          { label: '退学', value: 4 },
        ],
      },
      methods: {
        edit(row) {
          if (row && row.id) {
            this.editForm = row;
            this.editForm.id = row.id.toString();  // 将 id 转为字符串，避免精度丢失
          }
          this.visible = true;
          console.log("Editing ID: ", this.editForm.id);  // 打印 id，确保是字符串
        },
        save() {
          this.$refs.editForm.validate((valid) => {
            if (valid) {
              if (this.editForm.id) {
                G.put('{JAVAURL}/students/update', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false
                    G.toask('编辑学生选项成功')
                    this.params.pageNum = 1
                    this.getList()
                    console.log("Editing ID: ", row.id); // 查看获取到的 id
                  }
                })
              } else {
                G.post('{JAVAURL}/students/add', this.editForm).then(res => {
                  if (!res.errorMsg) {
                    this.visible = false
                    G.toask('添加学生选项成功')
                    this.params.pageNum = 1
                    this.getList()
                  }
                })
              }
            }
          })
        },
        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
        searchList() {
          this.params.pageNum = 1;
          this.getList();
        },
        getStudentType(type) {
          const types = {
            1: "在校",
            2: "毕业",
            3: "休学",
            4: "退学",
          };
          return types[type] || "未知";
        },
        getList() {
          this.loading = true;
          G.get('{JAVAURL}/students/list', this.params).then((res) => {
            this.loading = false;
            this.total = res.total;
            this.rows = res.rows;
            this.params.name = res.name;
          });
        }
      },

      mounted() {
        this.getList();
      }
    });
  })(Y)
</script>
<style scoped>

</style>